<template>
  <vue-draggable-next
    v-model="goodsList"
    class="select-goods-component component-select-goods"
  >
    <template
      v-for="(item, index) in goodsList"
      :key="index"
    >
      <div class="goods-items">
        <el-image
          :src="checkFileUrl(item.imgs)"
          fit="cover"
        >
          <template #error>
            <img
              src="@/assets/img/def.png"
              alt=""
            >
          </template>
        </el-image>
        <div
          class="close-x"
          @click="handleRemove(index)"
        >
          x
        </div>
      </div>
    </template>
    <div
      v-show="addLength > goodsList.length || addLength === -1"
      class="add-btn"
      style="margin: 0 10px 10px 0;"
      @click="handleClick"
    >
      +
    </div>
  </vue-draggable-next>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { VueDraggableNext } from 'vue-draggable-next'

const props = defineProps({
  addLength: { // 添加限制个数,当为-1的时候，表示可以无限添加
    type: Number,
    default: () => -1
  }
})

const goodsList = defineModel('goodsList', { default: [] })

const emit = defineEmits(['handleAddClick', 'handleRemove'])
// 添加商品
const handleClick = () => {
  if (props.addLength === -1) {
    emit('handleAddClick')
  } else {
    if (props.goodsList.length >= props.addLength) {
      return ElMessage.warning('当前添加的商品个数已达到最大个数')
    }
    emit('handleAddClick', props.goodsList.length)
  }
}

// 移除某个商品
const handleRemove = (index) => {
  emit('handleRemove', index)
}

</script>

<style lang="scss" scoped>
@use "index";
</style>
